<script setup lang="tsx">
import { usePermissionStoreWithOut } from '@/store/modules/permission'
import DialogAudit from '../../DialogAudit/index.vue'
// import DialogAudit from '@/components/OrderPayment/DialogAudit/index.vue'
import { getPayEnumApi, cancelVoucherApi } from '@/api/order/pay'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
import PreviewComponent from '@/components/Preview/index.vue'
const emit = defineEmits(['refresh'])
import { useEnumeratePicker, calculateColumnWidth } from '@/utils'

const { t } = useI18n()
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}
const permissionStore = usePermissionStoreWithOut()
// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operatorOptions: {
    type: Object,
    default: () => null
  }
})

console.log('orderOptions', props.operatorOptions)

// 定义 dataList 变量
const dataList = ref<any[]>([])
if (props.currentRow.isWholesal) {
  dataList.value = props.currentRow.payment_list || []
} else {
  dataList.value = props.currentRow.payment || []
}

// 移动端检测
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const isMobile = computed(() => appStore.getMobile)

//打开支付信息审核弹框
const DialogAuditRef = ref<InstanceType<typeof DialogAudit>>()
const handleAudit = (row: Record<string, any>) => {
  nextTick(() => {
    DialogAuditRef.value!.dialogVisible = true
    DialogAuditRef.value?.getBackShow(row, props.currentRow)
  })
}
//撤销审核
const handleCancelAudit = (row: Record<string, any>) => {
  ElMessageBox.confirm(t('common.message.operate'), t('common.tip'), {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let params = {
        id: row.id
      }
      let res = await cancelVoucherApi(params)
      console.log('res', res)
      if (res.code === 0) {
        ElMessage.success('撤销成功')
        initialize()
      }
    })
    .catch(() => {})
}
const initialize = async () => {
  emit('refresh')
}
//获取枚举
const orderOptions = ref<Record<string, any>>({})
const getDropDownBoxInfo = async () => {
  const orderResp = await getPayEnumApi({ field: 'all' })
  orderOptions.value = orderResp.data
}
getDropDownBoxInfo()
const reviewPermission = ref(false)
onMounted(() => {
  reviewPermission.value = false
  permissionStore.$state.addRouters.forEach((route) => {
    if (route.name === 'Order') {
      route.children?.forEach((child) => {
        if (child.name === 'OrderPayment') {
          child.children?.forEach((child2) => {
            if (child2.name === 'OrderPaymentReview') {
              reviewPermission.value = true
            }
          })
        }
      })
    }
  })
  console.log('reviewPermission', reviewPermission.value)
})
</script>

<template>
  <el-card shadow="always" :class="{ 'mobile-card': isMobile }">
    <div @click="togglePanel" class="header" :class="{ 'mobile-header': isMobile }">
      <span>{{ t('order.receiptManagement') }}</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <!-- 移动端卡片布局 -->
        <div v-if="isMobile" class="mobile-layout mobile-card-container">
          <div
            v-for="(row, index) in dataList"
            :key="index"
            class="mobile-item mobile-card pt-15px"
          >
            <div class="mobile-item-header flex justify-between items-center">
              <span class="mobile-item-title">支付记录 {{ index + 1 }}</span>
              <template v-if="currentRow.order_status !== 20">
                <el-button
                  v-hasPermi="['OrderManagementOrderPaymentReview']"
                  v-if="!currentRow.isWholesal && row.pay_status === '00'"
                  type="primary"
                  @click="handleAudit(row)"
                  size="small"
                  class="mobile-audit-btn"
                >
                  {{ t('wholesalOrder.audit') }}
                </el-button>
                <el-button
                  v-hasPermi="['WholesalOrderManagementPaymentReview']"
                  v-if="currentRow.isWholesal && row.status === '00'"
                  type="primary"
                  @click="handleAudit(row)"
                  size="small"
                  class="mobile-audit-btn"
                >
                  {{ t('wholesalOrder.audit') }}
                </el-button>
                <template v-if="userStore.getUserInfo?.id == currentRow.creator_id">
                  <el-button
                    type="primary"
                    v-if="
                      (currentRow.isWholesal && row.status === '00') ||
                      (!currentRow.isWholesal && row.pay_status === '00')
                    "
                    @click="handleCancelAudit(row)"
                    size="small"
                    class="mobile-audit-btn"
                  >
                    {{ t('common.cancelExamine') }}
                  </el-button>
                </template>
              </template>
            </div>

            <div class="mobile-item-content">
              <div class="mobile-field" v-if="currentRow.isWholesal">
                <label>{{ t('wholesalOrder.paymentType') }}:</label>
                <span>{{
                  useEnumeratePicker(operatorOptions.pay_method, row.payment_method)
                }}</span>
              </div>
              <div class="mobile-field" v-if="!currentRow.isWholesal">
                <label>{{ t('order.paymentMethod') }}:</label>
                <span>{{ useEnumeratePicker(operatorOptions.pay_method, row.pay_method) }}</span>
              </div>

              <div class="mobile-field" v-if="row.fee_type">
                <label>{{ t('orderPayment.feeType') }}:</label>
                <span>{{ useEnumeratePicker(orderOptions.fee_type, row.fee_type) }}</span>
              </div>

              <div class="mobile-field" v-if="row.pay_account">
                <label>{{ t('wholesalOrder.receivingAccountNumber') }}:</label>
                <span>{{ row.pay_account }}</span>
              </div>

              <div class="mobile-field" v-if="row.voucher_code">
                <label>{{ t('wholesalOrder.transactionTicketNumber') }}:</label>
                <span>{{ row.voucher_code }}</span>
              </div>

              <div class="mobile-field" v-if="row.transfer_voucher_url">
                <label>{{ t('wholesalOrder.proofOfTransfer') }}:</label>
                <div class="mobile-image-container">
                  <template v-if="row.transfer_voucher_url && row.transfer_voucher_url.length > 0">
                    <PreviewComponent :file-list="row.transfer_voucher_url" />
                  </template>
                </div>
              </div>

              <div class="mobile-field" v-if="row.transfer_recepit_url">
                <label>{{ t('orderPayment.proofOfReceipt') }}:</label>
                <div class="mobile-image-container">
                  <template v-if="row.transfer_recepit_url && row.transfer_recepit_url.length > 0">
                    <PreviewComponent :file-list="row.transfer_recepit_url" />
                  </template>
                </div>
              </div>

              <div class="mobile-field" v-if="row.pay_code">
                <label>{{ t('wholesalOrder.paymentTrackingCode') }}:</label>
                <span>{{ row.pay_code }}</span>
              </div>

              <div class="mobile-field" v-if="currentRow.isWholesal && row.pay_currency">
                <label>{{ t('wholesalOrder.paymentCurrency') }}:</label>
                <span>{{ useEnumeratePicker(operatorOptions.currency, row.pay_currency) }}</span>
              </div>

              <div class="mobile-field" v-if="row.payment_url">
                <label>{{ t('wholesalOrder.paymentLinks') }}:</label>
                <span class="mobile-link">{{ row.payment_url }}</span>
              </div>

              <div class="mobile-field" v-if="row.pay_time">
                <label>{{ t('wholesalOrder.paymentTime') }}:</label>
                <span>{{ row.pay_time }}</span>
              </div>

              <div class="mobile-field" v-if="row.paid_amount">
                <label>{{ t('wholesalOrder.theAmountToBePaid') }}:</label>
                <span class="mobile-amount">{{ row.paid_amount }}</span>
              </div>

              <div class="mobile-field" v-if="row.pay_amount">
                <label>{{ t('wholesalOrder.theAmountToBeshould') }}:</label>
                <span class="mobile-amount">{{ row.pay_amount }}</span>
              </div>

              <div class="mobile-field">
                <label>{{ t('wholesalOrder.paymentStatus') }}:</label>
                <span v-if="currentRow.isWholesal">{{
                  useEnumeratePicker(orderOptions.status, row.status)
                }}</span>
                <span v-else>{{ useEnumeratePicker(orderOptions.status, row.pay_status) }}</span>
              </div>

              <div class="mobile-field" v-if="row.notes">
                <label>{{ t('orderPayment.notes') }}:</label>
                <span>{{ row.notes }}</span>
              </div>

              <div class="mobile-field" v-if="row.remark">
                <label>{{ t('orderPayment.remark') }}:</label>
                <span>{{ row.remark }}</span>
              </div>

              <div class="mobile-field" v-if="row.reviewer">
                <label>{{ t('wholesalOrder.reviewers') }}:</label>
                <span>{{ useEnumeratePicker(operatorOptions.operator, row.reviewer) }}</span>
              </div>

              <div class="mobile-field" v-if="row.reviewer_time">
                <label>{{ t('wholesalOrder.reviewTime') }}:</label>
                <span>{{ row.reviewer_time }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 桌面端表格布局 -->
        <div v-else class="desktop-layout">
          <el-table
            :data="dataList"
            highlight-current-row
            stripe
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            class="responsive-table"
          >
            <el-table-column
              v-if="currentRow.isWholesal"
              :label="t('wholesalOrder.paymentType')"
              min-width="120"
              :width="calculateColumnWidth(dataList, 'payment_method')"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(operatorOptions.pay_method, row.payment_method) }}
              </template>
            </el-table-column>

            <el-table-column
              v-if="!currentRow.isWholesal"
              :label="t('order.paymentMethod')"
              min-width="120"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(operatorOptions.pay_method, row.pay_method) }}
              </template>
            </el-table-column>

            <el-table-column
              :label="t('orderPayment.feeType')"
              min-width="80"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{
                  row.fee_type === 1
                    ? '订单费用'
                    : row.fee_type === 2
                      ? '物流费用'
                      : row.fee_type === 3
                        ? '增补收入'
                        : ''
                }}
              </template>
            </el-table-column>

            <el-table-column
              :label="t('orderPayment.transferType')"
              min-width="80"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(orderOptions.transfer_type, row.transfer_type) }}
              </template>
            </el-table-column>

            <el-table-column
              :label="t('wholesalOrder.receivingAccountNumber')"
              prop="pay_account"
              min-width="160"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('wholesalOrder.transactionTicketNumber')"
              prop="voucher_code"
              :width="calculateColumnWidth(dataList, 'voucher_code', 1, 8)"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('wholesalOrder.proofOfTransfer')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <PreviewComponent
                  v-if="row.transfer_voucher_url && row.transfer_voucher_url.length > 0"
                  :file-list="row.transfer_voucher_url"
                />
              </template>
            </el-table-column>
            <el-table-column
              :label="t('orderPayment.proofOfReceipt')"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <PreviewComponent
                  v-if="row.transfer_recepit_url && row.transfer_recepit_url.length > 0"
                  :file-list="row.transfer_recepit_url"
                />
              </template>
            </el-table-column>
            <el-table-column
              :label="t('wholesalOrder.paymentTrackingCode')"
              prop="pay_code"
              min-width="160"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              v-if="currentRow.isWholesal"
              :label="t('wholesalOrder.paymentCurrency')"
              min-width="120"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(operatorOptions.currency, row.pay_currency) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="t('wholesalOrder.paymentLinks')"
              prop="payment_url"
              min-width="160"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('wholesalOrder.paymentTime')"
              prop="pay_time"
              :width="calculateColumnWidth(dataList, 'pay_time', 1, 9)"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('wholesalOrder.theAmountToBePaid')"
              prop="paid_amount"
              :width="calculateColumnWidth(dataList, 'paid_amount', 1, 10)"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('wholesalOrder.theAmountToBeshould')"
              prop="pay_amount"
              :width="calculateColumnWidth(dataList, 'pay_amount', 1, 10)"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              v-if="currentRow.isWholesal"
              :label="t('wholesalOrder.paymentStatus')"
              :width="calculateColumnWidth(dataList, 'status', 1, 10)"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(orderOptions.status, row.status) }}
              </template>
            </el-table-column>
            <el-table-column
              v-if="!currentRow.isWholesal"
              :label="t('wholesalOrder.paymentStatus')"
              :width="calculateColumnWidth(dataList, 'pay_status', 1, 10)"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(orderOptions.status, row.pay_status) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="t('orderPayment.notes')"
              prop="notes"
              :width="calculateColumnWidth(dataList, 'notes', 1, 10)"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('orderPayment.remark')"
              prop="remark"
              :width="calculateColumnWidth(dataList, 'remark', 1, 10)"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              :label="t('wholesalOrder.reviewers')"
              prop="reviewer"
              :width="calculateColumnWidth(dataList, 'reviewer', 1, 10)"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                {{ useEnumeratePicker(operatorOptions.operator, row.reviewer) }}
              </template>
            </el-table-column>
            <el-table-column
              :label="t('wholesalOrder.reviewTime')"
              prop="reviewer_time"
              :width="calculateColumnWidth(dataList, 'reviewer_time', 1, 9)"
              :show-overflow-tooltip="true"
            />
            <el-table-column fixed="right" :label="t('common.operation')" width="160">
              <template #default="{ row }" v-if="currentRow.order_status !== 20">
                <el-button
                  v-hasPermi="['OrderManagementOrderPaymentReview']"
                  type="primary"
                  v-if="!currentRow.isWholesal && row.pay_status === '00'"
                  @click="handleAudit(row)"
                  size="small"
                >
                  {{ t('wholesalOrder.audit') }}
                </el-button>
                <el-button
                  v-hasPermi="['WholesalOrderManagementPaymentReview']"
                  type="primary"
                  v-if="currentRow.isWholesal && row.status === '00'"
                  @click="handleAudit(row)"
                  size="small"
                >
                  {{ t('wholesalOrder.audit') }}
                </el-button>
                <template v-if="userStore.getUserInfo?.id == currentRow.creator_id">
                  <el-button
                    type="primary"
                    v-if="
                      (currentRow.isWholesal && row.status === '00') ||
                      (!currentRow.isWholesal && row.pay_status === '00')
                    "
                    @click="handleCancelAudit(row)"
                    size="small"
                  >
                    {{ t('common.cancelExamine') }}
                  </el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-collapse-transition>
  </el-card>
  <!--      支付信息审核弹框-->
  <DialogAudit ref="DialogAuditRef" @refresh="initialize" />
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
